<template>
  <div class="home">
    <div class="top">
      <span>Using attributes</span>
      <el-input
        v-model="roomNo"
        style="width: 240px"
        placeholder="Pick a date"
        :suffix-icon="Calendar"
        class="input1"
      />
      <el-input
        v-model="userName"
        style="width: 240px"
        placeholder="Type something"
        :prefix-icon="Search"
        class="input2"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="handleReset">重置搜索</el-button>
      <el-button type="primary" @click="handleAdd">新增订单</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="roomNo" label="房间编号" width="180" />
      <el-table-column prop="userName" label="用户名称" width="180" />
      <el-table-column prop="startTime" label="预定时间" width="180" />
      <el-table-column prop="endTime" label="退定时间" />
      <el-table-column prop="reserved" label="操作按钮">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleClick(row)">
            删除数据
          </el-button>
          <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
      <!-- 添加文章表单 -->
      <el-form label-width="100px" :model="article">
        <el-form-item label="房间号" prop="roomNo">
          <el-input placeholder="请输入标题" v-model="article.roomNo"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="userName">
        <el-input placeholder="请输入标题" v-model="article.userName"></el-input>
        </el-form-item>
        <el-form-item label="退订时间" prop="startTime">
          <el-date-picker
            v-model="article.startTime"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="退订时间" prop="endTime">
          <el-date-picker
            v-model="article.endTime"
            type="datetime"
            placeholder="选择日期时间"
          ></el-date-picker>

        </el-form-item>
        <div>
          <el-button type="primary" @click="update">确认修改</el-button>
          <el-button @click="handleCancel">取消修改</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { getReserve, deleteReserve ,addReserve,updateReserve,findReserve} from '../api/reserve'
import { reactive, ref } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'


const tableData = ref()

const article = ref({
  roomNo: '',
  userName: '',
  startTime: '',
  endTime: '',
})


//查询所有数据并在加载时显示
const getRoom = async () => {
  const res = await getReserve()
  tableData.value = res.data.data
  console.log(res.data.data)
}

//删除数据
const handleClick = async (row) => {
  ElMessageBox.confirm('是否删除?', '确认删除')
    .then(async () => {
      const res = await deleteReserve(row.id)
      getRoom()
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
      } else {
        ElMessage.error('删除失败')
      }
    })
    .catch()
}

//控制抽屉标签
const title = ref('新增订单')

//控制抽屉是否显示
const visibleDrawer = ref(false)

//修改数据按钮点击事件
const handleEdit = async (row) => {
  title.value = '修改'
  article.value.roomNo = row.roomNo
  article.value.userName = row.userName
  article.value.startTime = row.startTime
  article.value.endTime = row.endTime
  article.value.id = row.id
  //显示抽屉
  visibleDrawer.value = true
}

//添加按钮点击事件
const handleAdd = () => {
  visibleDrawer.value = true
  handleSubmit()
}

//修改数据
const update = async () => {
  //状态设置
  let response
  if (title.value === '新增订单') {
    //添加数据
    response = await addReserve(article.value)
    
  } else {
    //修改数据
    response = await updateReserve(article.value)
  }
  if (response.data.code === 200) {
    ElMessage.success('操作成功')
    visibleDrawer.value = false
    getRoom()
    handleSubmit()
  } else {
    ElMessage.error('操作失败')
  }
}

//添加时点击取消按钮事件
const handleCancel = () => {
  visibleDrawer.value = false
  handleSubmit()
}

//添加数据
const handleSubmit = async () => {
  title.value = '新增订单'

  article.value.id = null
  article.value.roomNo = ''
  article.value.userName = ''
  article.value.startTime = ''
  article.value.endTime = ''

  //清空cont中的内容
  let cdit = document.querySelector('.ql-editor')
  cdit.innerHTML = ''
}

const roomNo = ref('');
const userName = ref('');

//多条件查询
const handleSearch = async () => {
  let params = {
    roomNo: roomNo.value,
    userName: userName.value,
  };
  let res = await findReserve(params)
  tableData.value = res.data.data
}

//重置搜索条件
const handleReset = () => {
  roomNo.value = '';
  userName.value = '';

  getRoom();
};

getRoom()
</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  height: 100%;
  background: white;

  .top {
    span {
      margin-right: 20px;
    }

    .input1 {
      margin-right: 20px;
    }
    .input2 {
      margin-right: 20px;
    }
  }
}
</style>
